<html>
<header>
    <style>
        .zero-margin {
            margin: 0;
            padding: 0;
        }
    </style>
    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script>
        let canvas;
        let game;
        function draw() {
            if (!game) {
                return setImmediate(() => draw());
            }
            let ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            game.draw(canvas);
        }
        function drawLoop() {
            requestAnimationFrame(() => {
                draw();
                drawLoop();
            });
        }
        function init() {
            canvas = document.getElementById('app');
            canvas.getContext('2d').save();
            game = require('./game');
            game.init(canvas);
            game.addEventListener(require('./inner-event-services/handCardService'));
            canvas.addEventListener('mousedown', function (e) {
                let rect = canvas.getBoundingClientRect();
                let x = e.clientX - rect.left * (canvas.width / rect.width);
                let y = e.clientY - rect.top * (canvas.height / rect.height);
                game.mouseDown(x * 2, y * 2);
            });
            canvas.addEventListener('mouseup', function (e) {
                game.mouseUp();
            });
            canvas.addEventListener('mousemove', function (e) {
                let rect = canvas.getBoundingClientRect();
                let x = e.clientX - rect.left * (canvas.width / rect.width);
                let y = e.clientY - rect.top * (canvas.height / rect.height);
                game.mouseMove(x * 2, y * 2);
                draw();
            });
            drawLoop();
            let Background = require('./components/background');
            game.addComponent(new Background());
            let PowerSink = require('./components/PowerSink');
            let CardSlot = require('./components/cardSlot');
            let VerticalCardSlot = require('./components/verticalCardSlot');
            game.addComponent(new VerticalCardSlot('field', null));
            for (let side of ['bottom', 'top']) {
                for (let type of ['normal', 'extra']) {
                    let powerType = type == 'normal' ? 'magic' : 'anger';
                    let tmp = new PowerSink(type, powerType, 12, side);
                    tmp.power = Math.floor(Math.random() * 12);
                    game.addComponent(tmp);
                }
                game.addComponent(new VerticalCardSlot('deck', side));
                for (let type of ['grave', 'out', 'hero', 'ex']) {
                    game.addComponent(new VerticalCardSlot(type, side));
                }
                for (let type of ['magic', 'monster']) {
                    for (let i = 0; i < 5; ++i) {
                        game.addComponent(new CardSlot(type, side, i));
                    }
                }
            }
            let Card = require('./components/card');
            let card1_1 = new Card('1', {x: 855, y: 680, size: 'thumb', direction: ['up', 0]});
            let card2_1 = new Card('2', {x: 820, y: 65, size: 'thumb', direction: ['down', Math.PI / 2]});
            let showPile = require('./inner-events/showPile');
            showPile.testPileContent.push(card1_1, card2_1);
            let LeftSideBar = require('./components/leftSideBar');
            game.addComponent(new LeftSideBar(), null, 10);
            let Pile = require('./components/pile');
            for (let type of ['out', 'ex', 'deck', 'grave']) {
                for (let side of ['bottom', 'top']) {
                    let pile = new Pile(type, side);
                    pile.cardCount = Math.floor(Math.random() * 20) + 40;
                    pile.topCard = Math.random() > 0.5 ? card1_1 : card2_1;
                    game.addComponent(pile);
                }
            }
            let HpBoard = require('./components/hpSink');
            let hp1 = new HpBoard('bottom');
            hp1.value = 7300;
            let hp2 = new HpBoard('top');
            hp2.value = 8000;
            game.addComponent(hp1, null, 10);
            game.addComponent(hp2, null, 10);

            // test buttons
            let TestButton = require('./components/test/testButton');
            let y = 0;
            game.addComponent(new TestButton('翻转', 'flip', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('旋转', 'rotate', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('旋转翻转', 'rotate-and-flip', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('增加魔力', 'add-normal', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('增加蓄力', 'add-extra', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('消耗魔力', 'use-normal', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('消耗蓄力', 'use-extra', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('回到卡组', 'to-deck', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('送入墓地', 'to-grave', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('回到手卡', 'to-hand', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('除外', 'to-out', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('回到额外卡组', 'to-ex', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('调整HP', 'change-hp', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('附加buff', 'add-buff', 600, 70 * (y++) + 65));
            game.addComponent(new TestButton('移除buff', 'remove-buff', 600, 70 * (y++) + 65));
            let drawCardTestButton = new TestButton('抽卡', 'draw-card', 600, 70 * (y++) + 65);
            game.addComponent(drawCardTestButton);
            let cardArray = [];
            for (let i = 0; i < 20; ++i) {
                let c = new Card('' + (Math.floor(Math.random() * 2) + 1),
                    {x: 855, y: 680, size: 'thumb', direction: ['up', 0]});
                cardArray.push(c);
            }
            drawCardTestButton.setTestDeckCards(cardArray);
            let drawCardAndMoveToPileTestButton = new TestButton('从卡组送入墓地', 'draw-card-to-grave', 600, 70 * (y++) + 65);
            cardArray = [];
            for (let i = 0; i < 20; ++i) {
                let c = new Card('' + (Math.floor(Math.random() * 2) + 1),
                    {x: 855, y: 680, size: 'thumb', direction: ['up', 0]});
                cardArray.push(c);
            }
            drawCardAndMoveToPileTestButton.setTestDeckCards(cardArray);
            game.addComponent(drawCardAndMoveToPileTestButton);
            let graveToOutButton = new TestButton('从墓地中除外', 'grave-to-out', 600, 70 * (y++) + 65);
            cardArray = [];
            for (let i = 0; i < 3; ++i) {
                let c = new Card('' + (Math.floor(Math.random() * 2) + 1),
                    {x: 855, y: 680, size: 'thumb', direction: ['up', 0]});
                cardArray.push(c);
            }
            graveToOutButton.setTestDeckCards(cardArray);
            game.addComponent(graveToOutButton);
            let graveToHandButton = new TestButton('从墓地加入手卡', 'grave-to-hand', 600, 70 * (y++) + 65);
            cardArray = [];
            for (let i = 0; i < 3; ++i) {
                let c = new Card('' + (Math.floor(Math.random() * 2) + 1),
                    {x: 855, y: 680, size: 'thumb', direction: ['up', 0]});
                cardArray.push(c);
            }
            graveToHandButton.setTestDeckCards(cardArray);
            game.addComponent(graveToHandButton);
        }
    </script>
</header>
<body id="body" class="zero-margin" onload="init()">
<canvas id="app" class="zero-margin" width="2500" height="1492" style="width: 1250px; height: 746px;"></canvas>
</body>
</html>
